<template>

  <div class="title" >
    <div style="height: 50px;line-height:50px;border-bottom: 1px solid #ccc; display: flex">
      <!--网页信息-->
      <div style="width: 200px;padding-left: 30px;font-weight: bold;color: dodgerblue">
        <router-link :to="{ name:'Blogs'}" style="color:dodgerblue;text-decoration:none" >学习知识汇聚平台</router-link>
      </div>

      <div style="flex: 1">
      </div>
      <span style="margin-right: 8px;color: black"  :content="username" > {{username}}
     </span>

      <div style="width:55px;padding-top: 3px">
        <!--       查询用户头像-->

        <el-avatar   src=iconurl>
          <img :src="iconurl">
        </el-avatar>
      </div>
      <div style="width: 150px;">
        <!--个人信息姓名获取\下拉菜单-->
        <el-dropdown>
      <span class="el-dropdown-link">
        <el-button type="primary">
        个人中心<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
      </span>
          <template #dropdown>

            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-user">
                <router-link :to="{name:'Blog'}"  style="color: #333333;text-decoration: none">个人中心</router-link>
              </el-dropdown-item>

              <el-dropdown-item icon="el-icon-plus">

                <router-link :to="{name:'BlogEdit'}"  style="color: #333333;text-decoration: none">创建博客</router-link>


              </el-dropdown-item>

              <span v-if="form.category"><el-dropdown-item icon="el-icon-circle-plus">创建专题</el-dropdown-item></span>
              <el-dropdown-item icon="el-icon-close">
                <el-link style="color: #333333;text-decoration: none" @click="logout">退出登录
                </el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>

    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
const axios = require('axios');


export default {
  name: "headers",
  data(){
    return{
      uid:sessionStorage.getItem("uid"),
      username:'',
      iconurl:'',
      category:'',
      form: []
      // username:''
      // iconurl:''
      // category:''
      // email:''
      //,

    }
  }
  ,
  created()
  {
    this.load()
  },

  methods:
      {
        //加载头部信息，包括用户头像、用户名、用户权限
        load(){
          request.get("/api/head",{params:{uid:this.uid}}).then(res =>{
            this.username = res.data[0].username
            this.iconurl=res.data[0].iconurl
            this.category=res.data[0].category
            console.log(res)
            console.log('传到页面的数据为'+this.username)
            console.log('传到页面的数据为'+this.iconurl)
          })
        },
        //后端清除数据，跳转登陆界面
        logout() {
          const _this = this
          // _this.$axios.get("/logout").then(res =>
          // {
          _this.$store.commit("REMOVE_INFO")
          _this.$router.push("/login")
        },
      },
}





</script>

<style scoped>

</style>